<template>
	<view :style="{ '--color': color }" class="Moneyall">
		<navBar :title="title" :bgColor="bgColor" :transparent="false" color="#fff"></navBar>

		<view class="MoneyBox">
			<view class="Money" :style="{ backgroundImage: 'url(' + purse.balance_index_bj + ')' }">
				<view class="Money_account redbor">
					<view class="d-flex f-column white" @click="toUrl(`/moneyPage/capital/recharge_Info`)">
						<text
							class="size32">账户{{ nameDefinition.balanceTitle }}（{{ nameDefinition.balanceUnit }}）</text>
						<view class="d-flex a-center m-top10">
							<text class="size54 bold">{{ purse.v_money }}</text>
							<view class="iconfont icon-a-zujian32 h6 m-left20"></view>
						</view>
					</view>


				</view>
			</view>
		</view>

		<view class="content">
			<view class="row j-sb a-center">
				<text class="black size28">付款码</text>
				<text class="color size28" @click="toUrl(`record`)">凭证提交记录</text>
			</view>
			<view class="Instructions" v-if="purse.recharge_rule">
				<text class="black size32">余额说明</text>
				<view class="rows m-top30">
					<u-parse :content="purse.recharge_rule" :domain="imgUrl"></u-parse>
				</view>
			</view>
		</view>

		<view class="topUp">
			<view class="topUp_btn" @click="show = true">
				<text class="size32">上传凭证</text>
			</view>
		</view>


		<u-popup :show="show" @close="show = false" round="10" closeable :closeOnClickOverlay="false">
			<view class="u-popup">
				<text class="black size36">上传凭证</text>

				<view class="UploadBox" @click="">
					<image :src="$imgUrls(uploadImg)" mode="aspectFill" class="wh" v-if="uploadImg"></image>
					<view class="iconfont icon-tianjia size100 color_cc" v-else></view>

				</view>
				<view class="UploadBtn " :class="{'bgcolor':uploadImg}">上传凭证</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Api from '@/common/Api.js'
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				purse: '',
				activitys: [],
				activitysId: '',

				bgColor: '',
				show: false,
				uploadImg: 'https://msraimgcdn.mogoie.com/6137/1731406941626.jpg',
			}
		},
		onLoad() {
			this.myMoney()
		},
		onShow() {
			let options = wx.getEnterOptionsSync()
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.Shut == 1) {
				let extraData = options.referrerInfo.extraData
				if (!extraData) return
				if (extraData.code == 'success') {
					this.$Toast('充值成功')
					this.myMoney()
				}
			}
		},
		methods: {
			async myMoney() {
				const result = await Api.myMoney()
				this.purse = result
				this.activitys = result.activitys || []
				if (this.activitys.length) this.activitysId = this.activitys[0].id
			},

			handleRecharge() {

			},


			recharge() {
				this.$http
					.get({
						url: '/SRA_memberRecharge/config',
						data: {
							vId: this.vid,
							VeriCode: this.bid
						}
					})
					.then((res) => {
						if (res.code != '100') return this.$Toast(res.notice)
						const result = res.data
						if (!result || (result.myJson && result.myJson.rechargeState == 0)) return this.$Toast(
							`抱歉！您不能充值~~`)
						this.toUrl(`/moneyPage/capital/recharge`)
					})
			}
		},
		computed: {
			...mapState(['color', 'nameDefinition', 'vid', 'bid', 'share']),
			title() {
				return `我的${this.nameDefinition.balanceTitle}`
			},
			Sum() {
				if (!this.activitysId) return
				const result = this.activitys.find((item) => item.id == this.activitysId)
				return result.limit
			},
			SumTitle() {
				return this.activitys.length ? '自定义金额' : '去充值'
			}
		},

		onPageScroll(e) {
			if (e.scrollTop > 200) {
				this.bgColor = this.color
			} else {
				this.bgColor = ''
			}
		},

	}
</script>
<style scoped lang="scss">
	.u-popup {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 24rpx 100rpx 24rpx;

		.UploadBox {
			width: 320rpx;
			height: 320rpx;
			border: 1px solid #f2f2f2;
			overflow: hidden;
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.UploadBtn {
			width: 420rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			background-color: #cccccc;
			margin-top: 80rpx;
		}
	}

	.Moneyall {
		width: 100%;
		padding-bottom: 160rpx;
	}

	.MoneyBox {
		width: 100%;
		background-color: var(--color);
	}

	.Money {
		width: 100%;
		// #ifdef MP-WEIXIN
		padding: 230rpx 50rpx 50rpx 50rpx;
		// #endif
		// #ifdef H5
		padding: 160rpx 50rpx 50rpx 50rpx;
		// #endif
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.Money_account {
		width: 100%;
		display: flex;
		justify-content: space-between;


		.GiveBtn {
			width: 150rpx;
			height: 60rpx;
			background-color: #fff;
			font-size: 28rpx;
			color: var(--color);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}

	.content {
		width: 100%;
		background-color: #ffffff;
		padding: 50rpx;
		margin-top: -20rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.Topup_activity {
		width: 100%;
	}

	.Topup_activity_box {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 40rpx;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}

	.activity_list {
		width: 100%;
		height: 220rpx;
		padding: 10rpx;
		border: 1px solid #cccccc;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.money_val {
		color: #000;
		font-size: 52rpx;
	}

	.explain {
		color: var(--color);
		font-size: 26rpx;
		margin-top: 10rpx;
		text-align: center;
	}

	.Active {
		border: 1px solid var(--color) !important;
	}

	.Custom_title {
		color: var(--color);
		font-size: 26rpx;
	}

	.Instructions {
		width: 100%;
		margin-top: 30rpx;
	}

	.topUp {
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx 40rpx 60rpx 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 666;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
	}

	.topUp_btn {
		width: 100%;
		height: 80rpx;
		background-color: var(--color);
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 30rpx;
	}
</style>